<%@page import="util.MyUtils"%>
<%@page import="java.util.Date"%>
<%@page import="web.graficos.Graficos"%>
<%@page import="web.graficos.GraficosFactory"%>
<%@page import="bean.jugador.Jugador"%>
<%@page import="bean.juego.JuegoCTF"%>
<%@page import="bean.juego.Juego"%>
<%@page import="bean.Equipo"%>
<%@page import="util.Pair"%>
<%@page import="java.util.Set"%>
<%@page import="bean.Logro"%>
<%@page import="logic.Filtro"%>
<%@page import="java.util.List"%>
<%@page import="web.URLHelper"%>
<%@page import="logic.Buscador"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%
    int indice = Integer.parseInt(request.getParameter("n"));
    Juego juego = Buscador.getListaJuegos().get(indice - 1);
    Graficos graficos = GraficosFactory.getGraficos(true);
    List<Jugador> jugadores = juego.getJugadores();
%>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="<%=URLHelper.getCSSURL()%>" rel="stylesheet">
        <title>InfArena Juego <%=indice%> Statistics</title>
    </head>
    <body class="body_class">

        <a href="<%=URLHelper.rootFolder%>">
            Inicio
        </a>
        <br/>
        <%
            String tiempoJuego = MyUtils.formatTiempoJuego(juego);
            String fechaJuego = MyUtils.formatFechaJuego(juego);
        %>
        <span class="mw-headline">Juego <%=indice%> (<%=tiempoJuego%>) <%=fechaJuego%></span>
        <br/>
        <table>
            <tr>
                <td>
                    <% if (indice > 0) {%>
                    <a href="<%=URLHelper.getURLJuego(indice - 1)%>">
                        Juego Anterior
                    </a>
                    <% }%>
                </td>
                <td></td>
                <td>
                    <% if (indice < Buscador.getListaJuegos().size()) {%>
                    <a href="<%=URLHelper.getURLJuego(indice + 1)%>">
                        Juego Siguiente
                    </a>
                    <% }%>
                </td>
            </tr>
        </table>

        <br/><br/>

        <% if (juego instanceof JuegoCTF) {%>
        <jsp:include flush="true" page="juegoCTF.jsp">
            <jsp:param name="n" value="<%=indice%>"></jsp:param>
        </jsp:include>
        <% }%>
        <br/>
        <br/>
        <span class="mw-headline">MVP</span>
        <br/>
        <%
            List<Jugador> jugadoresMVP = juego.getMVPHumano();
            for (Jugador jugadorMVP : jugadoresMVP) {
        %>
        <jsp:include flush="true" page="imagenJugador.jsp">
            <jsp:param name="njugador" value="<%=jugadorMVP.getDatos().getNombre()%>"></jsp:param>
            <jsp:param name="tamanio" value="100"></jsp:param>
        </jsp:include>
        <% }%>
        <br/>
        <a href="/InfArena/FAQ.jsp" style="font-size: small" >Como se calcula esto?</a>
        <br/>
        <div id="chart_historia_puntos" class="chart"></div>
        <br/>
        <br/>
        <table>
            <tr>
                <td>
                    <% if (indice > 0) {%>
                    <a href="<%=URLHelper.getURLJuego(indice - 1)%>">
                        Juego Anterior
                    </a>
                    <% }%>
                </td>
                <td></td>
                <td>
                    <% if (indice < Buscador.getListaJuegos().size()) {%>
                    <a href="<%=URLHelper.getURLJuego(indice + 1)%>">
                        Juego Siguiente
                    </a>
                    <% }%>
                </td>
            </tr>
        </table>
        <script type="text/javascript" src="<%=URLHelper.jsFolder + "/google_jsapi.js"%>"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Minuto',<%=graficos.nombresJugadoresCSV(jugadores)%> ],
            <%=graficos.matrixHistoricoPuntos(juego, 10)%>
                    ]);

                    var options = {
                        title: 'Puntos durante el juego',
                        curveType: 'function',
                        vAxis: {
                            viewWindowMode:'explicit',
                            viewWindow:{
                                max:<%=juego.getMaximoPuntos() + 1%>,
                                min:0
                            }
                        }
                    };

                    var chart = new google.visualization.LineChart(document.getElementById('chart_historia_puntos'));
                    chart.draw(data, options);
                }
        </script>
    </body>
</html>
